<template>
	<view class="order-refund-detail pb100" :data-theme='theme()' :class="theme() || ''">
		<!--{{$t('order.after_sale_status')}}-->
		<view class="order-state d-s-c">
			<view class="icon-box"><span class="icon iconfont icon-gantanhao"></span></view>
			<view class="state-cont flex-1">
				<view class="state-txt d-b-c">
					<text class="desc f34">{{ detail.stateText }}</text>
				</view>
			</view>
			<view class="dot-bg"></view>
		</view>

		<!--{{$t('order.product_info')}}-->
		<view class="p30 mt20 bg-white">
			<view class="one-product border-b-e d-s-c pb20">
				<view class="cover">
					<image :src="detail.orderProduct && detail.orderProduct.productImage" mode="aspectFit"></image>
				</view>
				<view class="flex-1">
					<view class="pro-info">{{ detail.orderProduct && detail.orderProduct.productName }}</view>
					<view class="pt10 p-0-30">
						<text class="f24 gray9">
							<!--{{$t('order.unit_jin')}}:{{$t('order.weight_jin',{place1:10})}}; {{$t('order.color')}}:{{$t('order.color_red')}}; {{$t('order.origin')}}:{{$t('order.region_north')}}; {{$t('order.sales')}}:{{$t('order.sales_over',{place1:1000})}}; {{$t('order.size')}}:{{$t('order.diameter',{place1:1})}}; {{$t('order.taste')}}:{{$t('order.taste_sweet')}};-->
						</text>
					</view>
				</view>
			</view>
			<view class="d-e-c pt20 lh150">
				<view class="f24">
					{{ $t('order.product_amount') }}
					<text class="red">HK${{ totalPrice }}</text>
				</view>
			</view>
			<view class="d-e-c pt10 lh150">
				<view class="f24">
					{{ $t('order.actual_paid') }}
					<text class="red">HK${{ totalPayPrice }}</text>
				</view>
			</view>
			<view class="d-e-c pt10 lh150" v-if="detail.orderM && detail.orderM.orderSource == 80">
				<view class="f24" v-if="detail.orderproduct.advance">
					{{ $t('order.deposit_paid') }}({{ detail.orderproduct.advance.moneyReturn ? $t('order.refundable') : $t('order.non_refundable') }})：
					<text class="red">HK${{ detail.orderproduct.advance.payPrice }}</text>
				</view>
			</view>
		</view>

		<!-- 已退款金额 -->
		<view class="group bg-white" v-if="detail.status == 20 && detail.type == 10">
			<text class="gray9">{{ $t('order.refunded_amount') }}</text>
			<text class="gray9">HK${{ detail.refundMoney }}</text>
		</view>

		<!--{{$t('order.after_sale_info')}}-->
		<view class="group bg-white f24">
			<view class="p-20-0 border-b f34">
				{{ $t('order.return_info') }}
			</view>
			<view class="p-20-0 f28">
				<text class="gray9">{{ $t('order.after_sale_type') }}</text>
				<text>{{ detail.typeText }}</text>
			</view>
			<view class="p-20-0 f28">
				<text class="gray9">{{ $t('order.apply_reason') }}</text>
				<text>
					{{ detail.applyDesc || '' }}
				</text>
			</view>
			<view class="p-20-0 upload-list d-s-s f28">
				<text class="gray9">{{ $t('order.apply_proof') }}</text>
				<view class="d-s-s f-w">
					<block v-if="detail.images && detail.images.length > 0">
						<view class="item" v-for="(imgs, img_num) in detail.images" :key="img_num">
							<image :src="imgs.filePath" mode="aspectFit"></image>
						</view>
					</block>
					<block v-else>
						{{ $t('order.none') }}
					</block>
				</view>
			</view>
		</view>

		<!-- 售后信息-->
		<view v-if="detail.status == 10" class="group bg-white">
			<view class="p-20-0 border-b f34">
				{{ $t('order.seller_reject_reason') }}
			</view>
			<view class="p-20-0">
				<text class="red f28">{{ detail.refuseDesc }}</text>
			</view>
			<view class="p-20-0 border-b f34">
				{{ $t('order.platform_reject_reason') }}
			</view>
			<view class="p-20-0">
				<text class="red f28">{{ detail.plateDesc }}</text>
			</view>
		</view>

		<!--{{$t('order.return_address')}}-->
		<view class="group bg-white" v-if="detail.isAgree == 10 && detail.address">
			<view class="p-20-0 border-b f34">
				{{ $t('order.return_address') }}
			</view>
			<view class="pt30 f28">
				<text class="gray9">{{ $t('order.recipient') }}</text>
				<text>{{ detail.address.name }}</text>
			</view>
			<view class="pt30 f28">
				<text class="gray9">{{ $t('order.contact_phone') }}</text>
				<text>{{ detail.address.phone }}</text>
			</view>
			<view class="pt30 f28">
				<text class="gray9">{{ $t('order.full_address') }}</text>
				<text>{{ detail.address.detail }}</text>
			</view>
			<view class="pt30 f28" v-if="detail.expressNo">
				<text class="gray9">{{ $t('order.logistics_company') }}</text>
				<text>{{ detail.expressName }}</text>
			</view>
			<view class="pt30 f28" v-if="detail.expressNo">
				<text class="gray9">{{ $t('order.logistics_tracking_number') }}</text>
				<text>{{ detail.expressNo }}</text>
			</view>
			<view class="pt30 f28" v-if="detail.isPlateSend">
				<text class="gray9">{{ $t('order.exchange_courier') }}</text>
				<text>{{ detail.sendExpressName }}</text>
			</view>
			<view class="pt30 f28" v-if="detail.isPlateSend"
				@click="gotoPage('/pages/order/express/refund-express?orderId=' + detail.orderRefundId);">
				<text class="gray9">{{ $t('order.exchange_tracking') }}</text>
				<text>{{ detail.sendExpressNo }}</text>
			</view>
			<view class="mt20 pb20 border-t gray9">
				<view class="pt20">
					· {{ $t('order.noCOD') }}
				</view>
				<view class="pt10">
					· {{ $t('order.valid_logistics_tip') }}
				</view>
			</view>
		</view>
		<!-- 填写物流信息 -->
		<form @submit="formSubmit" v-if="detail.type != 30 && detail.isAgree == 10 && detail.isUserSend == 0"
			report-submit>
			<view class="group bg-white">
				<view class="p-20-0 border-b f34">
					{{ $t('order.fill_logistics_info') }}
				</view>
				<view class="p-20-0 d-s-c">
					<view class="gray9">{{ $t('order.logistics_company') }}</view>
					<view class="flex-1 p20 border">
						<picker mode="selector" @change="onExpressChange" :range="expressList" range-key="expressName"
							:value="index">
							<text v-if="index > -1">{{ expressList[index].expressName }}</text>
							<text v-else class="col-80">{{ $t('order.select_courier') }}</text>
						</picker>
					</view>
				</view>
				<view class="p-20-0 d-s-c">
					<view class="gray9">{{ $t('order.logistics_tracking_number') }}</view>
					<view class="flex-1 border">
						<input class="p10" v-model="form.expressNo" :placeholder="$t('order.enter_tracking')" />
					</view>
				</view>
				<view class="mt20">
					<template v-if="isWeixin() && mpState == 1 && temlIds.length > 0">
						//#ifdef H5
						<wx-open-subscribe :template="temlIds" @success="subscribeSuccess" @error="subscribeFail">
							<div v-is="'script'" type="text/wxtag-template" slot="style">
								<div v-is="'style'">
									.subscribe-btn{
									border: 1px solid #f6220c;
									background: #f6220c;
									color: #fff;
									border-radius:20px;
									box-sizing: border-box;
									text-align: center;
									}
								</div>
							</div>
							<div v-is="'script'" type="text/wxtag-template">
								<div class="subscribe-btn" :style="{
									width: btnAtrrpx.width + 'px',
									height: btnAtrrpx.height + 'px',
									lineHeight: btnAtrrpx.height + 'px',
									paddingLeft: btnAtrrpx.paddingLeft + 'px',
									paddingRight: btnAtrrpx.paddingLeft + 'px',
									fontSize: btnAtrrpx.fontSize + 'px',
								}">
									{{ $t('order.confirm_shipment') }}
								</div>
							</div>
						</wx-open-subscribe>
						//#endif
					</template>
					<template v-else>
						<button class="btn-red" @click="formSubmit">{{ $t('order.confirm_shipment') }}</button>
					</template>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
export default {
	data() {
		return {
			/*是否加载完成*/
			loadding: true,
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			expressList: {},
			index: -1,
			ordeRefundId: 0,
			/*退货详情*/
			detail: {
				address: {},
			},
			expressId: 0,
			totalPrice: 0,
			totalPayPrice: 0,
			/*消息模板*/
			temlIds: [],
			btnAtrrpx: {},
			form: {},
			// 1 公众号登录
			mpState: null,
		}
	},
	onLoad(e) {
		let mpState = uni.getStorageSync('mpState');
		this.mpState = mpState;
		this.orderRefundId = e.order_refund_id;
	},
	onShow(){
		uni.setNavigationBarTitle({
			title: this.$t('common.after_sales')
		})
	},
	mounted() {
		/*获取详情*/
		this.getData();
		if (this.isWeixin()) {
			this.url = window.location.href;
			this.getBtnInfo();
			this.getTemplateId();
		}
	},
	methods: {
		subscribeSuccess() {
			this.formSubmit();
			console.log("调用成功")
		},
		subscribeFail() {
			this.formSubmit();
			console.log("调用失败")
		},
		getBtnInfo() {
			let self = this;
			let btnAtrrpx = {
				width: 690,
				height: 88,
				paddingLeft: 28,
				fontSize: 32,
			}
			uni.getSystemInfo({
				success: function (res) {
					let scale = res.screenWidth / 750;
					let newObj = {};
					for (let key in btnAtrrpx) {
						newObj[key] = btnAtrrpx[key] * scale;
					}
					self.btnAtrrpx = newObj;
				},
				fail() {
					self.btnAtrrpx = btnAtrrpx;
				},
			});
		},
		getTemplateId() {
			let self = this;
			self._postBody(
				'index/getSignPackage', {
				url: self.url,
				paySource: self.getPlatform(),
			},
				function (res) {
					// self.temlIds = res.data.templateArr;
					self.mpMessage(res.data.signPackage);
				}
			);
		},
		/*获取数据*/
		getData() {
			let self = this;
			uni.showLoading({
				title: this.$t('order.loading')
			});
			let orderRefundId = self.orderRefundId;
			self._get(
				'user/refund/detail', {
				orderRefundId: orderRefundId,
				platform: self.getPlatform()
			},
				function (res) {
					uni.hideLoading();
					self.detail = res.data;
					self.expressList = res.data.expressList;
					self.totalPrice = self.detail.orderProduct.totalPrice;
					self.totalPayPrice = self.detail.orderProduct.totalPayPrice;
				}
			);
		},
		/*选择物流*/
		onExpressChange: function (e) {
			this.index = e.detail.value;
			this.expressId = this.expressList[this.index].expressId;
		},

		/*发货*/
		formSubmit: function (e) {
			let self = this;
			var formdata = self.form;
			formdata.orderRefundId = self.orderRefundId;
			formdata.expressId = self.expressId;
			if (self.expressId == 0) {
				self.showError(this.$t('order.select_courier'));
				return false;
			}
			let callback = function () {
				uni.showLoading({
					title: self.$t('order.submitting'),
					mask: true
				});
				self._postBody('user/refund/delivery', formdata, function (res) {
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
						duration: 3000,
						complete: function () {
							self.gotoPage(
								'/pages/order/refund/detail/detail?order_refund_id=' +
								self.orderRefundId, 'redirectTo');
						}
					});
				});
			};
			self.subMessage(self.temlIds, callback);
		},
	}
}
</script>

<style>
.order-refund-detail .btn-red {
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	box-shadow: 0 8rpx 16rpx 0 rgba(226, 35, 26, .6);
}
</style>
